<template>
  <div class="container" >
    <div class="shopShow">
      <swiper>
        <swiper-item v-for="(value,index) in shopImgShow">
          <img :src="value.img_url" @click="enlarge(value.img_url)" mode="aspectFill"/>
        </swiper-item>
      </swiper>
      <span>{{shopDetails}}</span>
    </div>
    <div class="priceShow">
      <div class="price">
        <span>¥{{s_price}}</span>
        <span v-if="m_price != null & m_price != ''">{{m_price}}</span>
        <img src="http://file.rzkeji.com/web/loveciy/img/design1.png" v-if="sale_type=='custom' ? true : false"/>
      </div>
<!--      <div class="taobao">-->
<!--        <span>官方网店</span>-->
<!--        <span>打开淘宝搜索一下乐自造</span>-->
<!--      </div>-->
<!--      <div class="password" v-if="taobao_code==null ? false : true">-->
<!--        <span>淘口令</span>-->
<!--        <text selectable @click="copy">{{taobao_code}}</text>-->
<!--        <span>》请复制淘口令《</span>-->
<!--      </div>-->
      <!--<div class="activity">-->
        <!--<div class="activityTitle">优惠活动</div>-->
        <!--<ul>-->
          <!--<li v-for="value in discount">-->
            <!--<span>限购优惠</span>-->
            <!--<span>{{value.title}}</span>-->
            <!--<span>{{value.start_time}}-{{value.end_time}}</span>-->
          <!--</li>-->
        <!--</ul>-->
      <!--</div>-->
      <div class="show">
        <div class="showTitle">SHOW</div>
        <inda :motto="showImg" :motto1="planArry"></inda>
      </div>
    </div>
    <div class="shopDetails">
      <span class="title">商品详情</span>
      <wxParse :content="article" />
    </div>
    <img src="http://file.rzkeji.com/web/loveciy/img/footer.jpg" class="footer1" mode="aspectFill"/>
    <div class="footer">
      <ul>
        <li>
          <button open-type="share" class="share">
          <img src="http://file.rzkeji.com/web/loveciy/img/circle/share1.png"/>
          分享
          </button>
        </li>
<!--        <li v-if="taobao_code==null ? false : true" @click="copy">-->
<!--          <img src="http://file.rzkeji.com/web/loveciy/img/circle/copy.png"/>-->
<!--          复制淘口令-->
<!--        </li>-->
        <li style="background: #FE2D54;color:#fff" v-if="sale_type=='custom' ? true : false"><navigator url="/pages/customer/main">立刻定制</navigator></li>
      </ul>
    </div>

<div class="ucenter">
          <navigator url="../personal/main">
            <img src="http://ciy.oss-cn-shenzhen.aliyuncs.com/web/cut/icon-ucenter.png" class="customer"/>
          </navigator>
    </div>
    <div class="customerWrap">
          <navigator url="../customer/main">
            <img src="http://file.rzkeji.com/web/loveciy/img/customer.png" class="customer"/>
          </navigator>
    </div>
    <footer1></footer1>
  </div>
</template>

<script>
import wxParse from 'mpvue-wxparse'
import inda from '@/components/swiper'
import footer1 from '@/components/footer'
export default {
  components: {
   inda,
   wxParse,
   footer1
  },
  data () {
    return {
      article:"",
      shopImgShow:[],
      s_price:"",
      m_price:"",
      sale_type:"",
      taobao_code:"",
      shopDetails:"",
      planArry:[],
      showImg:[],
      discount:[],
      id:""
    }
  },
  onLoad (options) {
    var _this=this;
    _this.id=options.shopId
    console.log(options.shopId)
    _this.showImg=[];
    _this.$request.getData('https://diy.zoomyoung.cn/api/goods/get-goods-detail',{id:options.shopId}).then(res =>{
      var res=res.data.data;
      _this.shopImgShow=res.thumb_imgs;    //这是头部商品图片展示
      _this.discount=res.discounts;         //获取优惠信息
      [_this.article,_this.shopDetails,_this.s_price,_this.m_price,_this.taobao_code,_this.sale_type]=[res.info,res.name,res.s_price,res.m_price,res.taobao_code,res.sale_type]
        for(let [index,value] of res.show_imgs.entries())
        {
          _this.showImg.push({
            imgSrc:value.img_url,
            content1:"",
            content2:"",
            //设置img的样式，因为在首页的swiper照片的大小不一样，为了套用一个模板所以需要传数据进去
             imgStyle:{
              width:'172.5px',
              height:'140px'
            },
            tag:1,    //这个tag用来判断是否自定义定制
            shopId:""
          })
        }
        _this.planArry=_this.selectImg(_this.showImg)
    })
  },

  methods:{
    enlarge(value){    //点击放大图片
      wx.previewImage({
        current:value,
        urls:[value]
      })
    },
    copy(){    //点击复制文本到剪切板
      this.$currency.copyText(this.taobao_code);
    },
    selectImg(value1){
    var _this=this;
    var arry=[];
    for(let [index,value] of value1.entries())   //把arry的所有照片都设为不显示
    {
    arry.push(false)
    }
    _this.showIndex=Math.ceil(wx.getSystemInfoSync().windowWidth/(parseInt(value1[0].imgStyle.width.slice(0,-2))+15));
      for(let [index1,value] of arry.entries())   //判断当前初始化时候显示多少张照片
      {
        if(index1<_this.showIndex)
        {
          arry[index1]=true;
        }
      };
      return arry;
    }
  },
  onShareAppMessage(res){
    var path='/pages/shop/main?shopId='+this.id
    this.$currency.share(res,'商品详情页',path)
  }
}
</script>

<style scoped>
@import url("~mpvue-wxparse/src/wxParse.css");
.container{width: 100%;padding-bottom: 100px;}
.shopShow{width: 100%;height: 375px;position: relative;}
swiper{height: 100%}
.shopShow img{width: 100%;height: 375px;position: absolute;left: 0;top: 0;}
.shopShow span{width: 355px;background: rgba(0,0,0,0.5);padding:10px;color: #fff;position: absolute;left: 0;bottom: 0;font-size: 14px;line-height: 20px;}
.priceShow{width: 100%;}
.price{width: 100%;height: 30px;margin-top:8px;}
.price img{width:34px;height:17px;vertical-align: middle;margin-left: 10px;}
.price span:nth-of-type(1){margin-left: 15px;color: red;}
.price span:nth-of-type(2){margin-left: 10px;color: #7b7b7b;font-size: 14px;}
.taobao{width:360px;height: 50px;margin-left:15px;margin-top: 20px;}
.taobao span{width: 100%;display: block;}
.taobao span:nth-of-type(1){height: 30px;line-height: 30px;font-size: 16px;}
.taobao span:nth-of-type(2){height: 20px;line-height: 20px;font-size: 13px;color: #9d9d9d}
.password{width: 100%;display: flex;flex-direction: column;margin-top: 17px;}
.password span:nth-of-type(1){margin-left: 15px;font-size: 16px;}
.password text{width: 345px;height: 35px;border: 0.5px solid #CCCCCC;text-align: center;line-height: 35px;font-size: 15px;margin-left: 15px;color:#666666;margin-top: 5px;border-radius: 5px;margin-top: 8px}
.password span:nth-of-type(2){width: 100%;text-align: center;height: 20px;line-height: 20px;font-size: 14px;color: #999999;margin-top: 5px;}
.show{margin-top: 10px;}
.showTitle{widows: 360px;margin-left: 15px;font-size: 16px;}
.activity{width: 100%;margin-top: 17px}
.activityTitle{margin-left: 15px;font-size: 16px;margin-top: 5px;margin-bottom: 5px;}
.activity ul{margin-left: 15px;width: 355px;margin-top:9px;}
.activity ul li{width:100%;height: 45px;margin-top:5px;}
.activity ul li span:nth-of-type(1){width: 71px;height: 18px;text-align: center;line-height: 18px;color: red;border: 0.1px solid red;border-radius: 6px;display: block;float: left;font-size: 14px;margin-top: 3px;}
.activity ul li span:nth-of-type(2){width: 250px;height: 25px;line-height: 25px;margin-left: 15px;font-size: 16px;overflow: hidden;display: block;float: left;text-overflow: ellipsis;white-space: nowrap;}
.activity ul li span:nth-of-type(3){width: 250px;height: 16px;line-height: 16px;font-size: 11px;margin-left: 88px;display: block;color: #7b7b7b}
.shopDetails{width: 100%;margin-top: 10px}
.shopDetails .title{line-height: 25px;font-size: 16px;margin-left: 15px;}
.shopDetails ul{width: 345px;margin-left: 15px;}
.shopDetails li{width: 100%;margin-top:5px;}
.shopDetails li img{width: 100%;display: block}
.footer{width: 100%;height:50px;position: fixed;left: 0;bottom: 48px;background: rgba(255,255,255,0.8);font-size: 14px;}
.footer ul{width: 100%;height: 50px;line-height: 50px;text-align: center;display: flex;justify-content: flex-end;border: 0.11px solid #cccccc;}
.footer ul li:nth-of-type(1){width: 75px;}
.footer ul li:nth-of-type(1) img{width: 30px; height: 30px;vertical-align:middle;}
.footer ul li:nth-of-type(2) img{width: 30px; height: 30px;vertical-align:middle;}
.footer ul li:nth-of-type(2){width: 115px;color: #666666}
.footer ul li:nth-of-type(3){width: 80px;background: #FE2D54;margin-left: 5px;color: #fff;}
button.share{width: 75px;height: 50px;margin-left: 0px;background: transparent;font-size: 14px;padding:0;line-height: 50px;color: #666666}
button.share::after{border:none;}   /*初始化button的样式*/
.footer1{width: 100%;height: 36px;display: block;}
.customerWrap{width: 50px;height: 50px;position: fixed;right: 20px;bottom: 120px;background: rgba(0,0,0,0.5);border-radius: 50px;}
.customer{width:40px;height:40px;margin-left:5px;margin-top:5px;}
.ucenter{width: 50px;height: 50px;position: fixed;right: 20px;bottom: 179px;background: rgba(0,0,0,0.5);border-radius: 50px;}
</style>
